<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>Virtual Keyboard Language Layouts</title>

	<!-- demo -->
	<link href="demo/demo.css" rel="stylesheet">

	<!-- jQuery & jQuery UI + theme (required) -->
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

	<!-- keyboard widget css & script (required) -->
	<link href="css/keyboard.css" rel="stylesheet">
	<script src="js/jquery.keyboard.js"></script>

	<!-- keyboard extensions (optional) -->
	<script src="js/jquery.mousewheel.js"></script>
	<script src="js/jquery.keyboard.extension-typing.js"></script>


	<!-- preloaded keyboard layout -->
	<script src="layouts/albanian.js" charset="utf-8"></script>

	<!-- theme switcher -->
	<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>

	<script>
	var showKb = function(name){
		$('#multi').keyboard({
			layout: name,
			usePreview: false
		})
		.addTyping()
		.getkeyboard().reveal();
	};

	$(document).ready(function() {

		// Theme switcher
		$('#switcher').themeswitcher();

		$('#lang').change(function(){
			var kb = $('#multi'),
				opt = $(this).find('option:selected'),
				layout = opt.attr('class'),
				file = $(this).val();
			$('h2').text(opt.text());
			$('#multi')[file.match('arabic') ? 'addClass' : 'removeClass']('rtl');
			if (!$('script[src*=' + file + ']').length) {
				$.getScript('layouts/' + file + '.js', function() {
					if (kb.data('keyboard')) { kb.getkeyboard().destroy(); }
					showKb( layout );
				});
			} else {
				showKb( layout );
			}
		}).trigger('change');

	});

	// Renaming some of the default keyboard key names (including symbols)
	// *Note* this will effect ALL layouts on this page
	$.extend(true, $.keyboard.defaultOptions.display, {
		'accept' : '\u2714 Accept:Accept (Shift-Enter)', // check mark
		'bksp'   : ($.browser.msie ? '\u2190 Bksp:Backspace' : '\u232b Bksp:Backspace'), // Arrow with X (not in IE) or Left arrow (same as &larr;)
		'cancel' : '\u2716 Cancel:Cancel (Esc)', // big X, close - same action as cancel
		'enter'  : '\u21b5 Enter:Enter',  // down, then left arrow - enter symbol
		'shift'  : '\u21e7 Shift:Shift',  // thick hollow up arrow
		'sign'   : '\u00b1:Change Sign',  // +/- sign for num pad
		'space'  : ' :Space',
		'tab'    : '\u21e5 Tab:Tab'       // right arrow to bar (used since this virtual keyboard works with one directional tabs)
	});
	</script>
	<style>
	/* making a few keys wider, to include the symbol - use .ui-keyboard-actionkey to affect all (including space) */
	.ui-keyboard-accept, .ui-keyboard-cancel, .ui-keyboard-bksp, .ui-keyboard-enter, .ui-keyboard-shift {
		font-size: .8em;
		width: 5.2em;
		height: 2em;
	}
	.rtl {
		direction: rtl;
		text-align: right;
	}
	</style>
</head>
<body>
<div id="page-wrap">
	<!-- Links to other demo pages & docs -->
	<div id="nav">
		<a href="index.html">Main Demo</a>
		<a href="basic.html">Basic Demo</a>
		<a class="current" href="layouts.html">Language Demos</a>
		<a href="calculator.html">Calculator Demo</a>
		<a class="play" href="http://jsfiddle.net/Mottie/Qs2V2/">Playground</a>
		<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
		<a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
		<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a>
	</div>
	<!-- End Links -->

	<h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard Language Layouts</a></h1>
	<h4>This is a work in progress.</h4>

	<div id="switcher"></div>
	<br>
	<div class="block2">
		<select id="lang">
			<!-- value="file name", class="layout name", Title -->
			<option value="albanian" class="albanian-qwerty">Albanian (qwerty)</option>
			<option value="albanian" class="albanian-qwertz">Albanian (qwertz)</option>
			<option value="arabic" class="arabic-azerty">Arabic (azerty)</option>
			<option value="arabic" class="arabic-qwerty-1">Arabic (qwerty-1)</option>
			<option value="arabic" class="arabic-qwerty-2">Arabic (qwerty-2)</option>
			<option value="arabic" class="arabic-qwerty-3">Arabic (qwerty-3)</option>
			<option value="arabic" class="arabic-qwerty-4">Arabic (qwerty-4)</option>
			<option value="belarusian" class="belarusian-qwerty">Belarusian (Belarus)</option>
			<option value="bengali" class="bengali-qwerty-1">Bengali (qwerty-1)</option>
			<option value="bengali" class="bengali-qwerty-2">Bengali (qwerty-2)</option>
			<option value="bulgarian" class="bulgarian-qwerty">Bulgarian (qwerty)</option>
			<option value="catalan" class="catalan-qwerty">Catalan (qwerty)</option>

			<option value="german" class="german-qwertz-1">German (qwertz-1)</option>
			<option value="german" class="german-qwertz-2">German (qwertz-2)</option>
			<option value="scandinavian" class="scandic-qwerty">Scandinavian (qwerty)</option>
			<option value="scandinavian" class="scandic-dvorak">Scandinavian (dvorak)</option>

<!--
			<option value="" class=""></option>
-->
		</select>
		<div style="height: 50px;"></div>

		<h2></h2>
		<input id="multi" type="text" />
	</div>
	<br class="clear" />

	<div id="footer2">
		<div>
			If you find any errors, please submit an <a href="https://github.com/Mottie/Keyboard/issues">issue</a>.<br>
			Or if you would like to contribute a layout, please email me at <a href="%6D%61%69%6C%74%6F%3Aw%6Fwm%6Ftty%40g%6Dail%2Ec%6Fm">wowmotty a&#116; &#103;&#109;&#97;&#105;&#108; d&#111;t c&#111;m</a>
		</div>
	</div>

</div>

</body>
</html>